import { createRouter, createWebHistory } from 'vue-router';
import { ElMessage } from 'element-plus';

// 引入页面组件
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import Home from '../views/Home.vue';
import Products from '../views/Products.vue'; // 引入 Products 组件
import ProductDetail from '../views/ProductDetail.vue'; // 引入 ProductDetail 组件
import Cart from '../views/Cart.vue'; // 引入 Cart 组件
import Checkout from '../views/Checkout.vue'; // 引入 Checkout 组件
import OrderConfirmation from '../views/OrderConfirmation.vue'; // 引入 OrderConfirmation 组件
import OrderHistory from '../views/OrderHistory.vue'; // 引入 OrderHistory 组件
import OrderDetail from '../views/OrderDetail.vue'; // 引入 OrderDetail 组件
import Profile from '../views/Profile.vue'; // 引入 Profile 组件
import NotFound from '../views/NotFound.vue'; // 引入 NotFound 组件

// 占位组件，后续会替换为真实的页面组件
// const Home = { template: '<div>首页</div>' }; // 由实际组件替换
// const Products = { template: '<div>商品列表页</div>' }; // 由实际组件替换
// const Cart = { template: '<div>购物车页</div>' }; // 由实际组件替换
// const Checkout = { template: '<div>结算页</div>' }; // 由实际组件替换
// const Profile = { template: '<div>个人中心页</div>' }; // 由实际组件替换

const routes = [
  { path: '/', name: 'Home', component: Home }, // 使用 Home.vue
  { path: '/products', name: 'Products', component: Products }, // 使用 Products.vue
  { path: '/products/:slug', name: 'ProductDetail', component: ProductDetail, props: true },
  { path: '/cart', name: 'Cart', component: Cart, meta: { requiresAuth: true } }, // 使用 Cart.vue
  { path: '/checkout', name: 'Checkout', component: Checkout, meta: { requiresAuth: true } }, // 使用 Checkout.vue
  { 
    path: '/order-confirmation/:orderNumber', 
    name: 'OrderConfirmation', 
    component: OrderConfirmation, 
    props: true, 
    meta: { requiresAuth: true } 
  },
  { path: '/orders', name: 'OrderHistory', component: OrderHistory, meta: { requiresAuth: true } }, // 使用 OrderHistory.vue
  { 
    path: '/orders/:orderNumber', 
    name: 'OrderDetail', 
    component: OrderDetail, 
    props: true, 
    meta: { requiresAuth: true } 
  },
  { path: '/login', name: 'Login', component: Login, meta: { guestOnly: true } },
  { path: '/register', name: 'Register', component: Register, meta: { guestOnly: true } },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile, // 使用 Profile.vue
    meta: { requiresAuth: true },
  },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, // 使用 NotFound.vue
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    return { top: 0 };
  },
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('user_token');

  if (to.meta.requiresAuth && !isAuthenticated) {
    ElMessage.warning('请先登录');
    next({ name: 'Login', query: { redirect: to.fullPath } });
  } else if (to.meta.guestOnly && isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});

// 全局后置钩子
router.afterEach((to, from) => {
  // 路由切换后的处理
  if (to.name === 'NotFound') {
    ElMessage.warning('页面不存在');
  }
});

// 全局错误处理
router.onError((error) => {
  console.error('路由错误:', error);
  ElMessage.error('页面加载失败，请稍后重试');
  router.push('/');
});

export default router; 